import React from 'react';
import * as THREE from 'three';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
import { GammaCorrectionShader } from 'three/examples/jsm/shaders/GammaCorrectionShader';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass';
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader';
import { SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass';

import Scene from './Scene';
import style from './FrozenStation.css';

export default class Renderer {
    constructor(){
        this.scene = new Scene();
        this.canvas = this.scene.canvas;
        this.canvasScene = this.scene.scene;
        this.camera = this.scene.camera.perspectiveCamera;
        this.sizes = this.scene.sizes;
        this.container = this.scene.container;
        this.raycaster = new THREE.Raycaster();
        this.setRenderer();
        this.setEffectComposer();
        this.handleMouseMove();
    }
    setRenderer(){     
        let renderer = new THREE.WebGLRenderer({
            canvas:this.canvas,
            antialias:true,
            alpha:true
        });
        renderer.setSize(this.sizes.width, this.sizes.height);
        renderer.setPixelRatio(this.sizes.pixelRatio);
        renderer.outputEncoding = THREE.sRGBEncoding;
        // 调整曝光值和曝光级别
        // renderer.toneMapping = THREE.ReinhardToneMapping;
        // renderer.toneMappingExposure = 2;
        // 开启阴影贴图，设置阴影贴图类型
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFShadowMap;
        this.renderer = renderer;
    }
    handleMouseMove(){
        let mouse = new THREE.Vector2();
        let boundingRect = this.container.getBoundingClientRect();
        let prevObj = null;
        let infoDom = document.getElementsByClassName(style['info-container'])[0];
        
        function handleMouseMove(event){
            mouse.x = ( ( event.clientX - boundingRect.left ) / this.sizes.width ) * 2 - 1;
			mouse.y = - ( ( event.clientY - boundingRect.top ) / this.sizes.height ) * 2 + 1;
            // console.log(mouse);
            this.raycaster.setFromCamera(mouse, this.camera);
            const intersects = this.raycaster.intersectObject(this.canvasScene , true );
            
			if ( intersects.length > 0 ) {
				// 更新信息框位置
                const selectedObject = intersects[0].object;
                if ( selectedObject.name === 'ground' || selectedObject.name.includes('tube') ) {
                    prevObj = null;
                    return ;
                }
                // if ( infoDom ) {
                //     infoDom.style.display = 'block';
                //     infoDom.style.left = event.clientX - boundingRect.left + 40 +  'px';
                //     infoDom.style.top = event.clientY - boundingRect.top + 20  + 'px';
                // }
                // console.log(selectedObject);
                // 考虑单个Mesh结构和多结构体的Group模型
                if ( selectedObject !== prevObj  ) {
                    if ( this.outlinePass ) {
                        this.outlinePass.visibleEdgeColor.set('#fff');
                        let isSingleMesh = selectedObject.parent.type === 'Group' && selectedObject.parent.name === 'Scene' ? true : false;
                        this.outlinePass.selectedObjects = isSingleMesh ?  [selectedObject] : [selectedObject.parent];
                        prevObj = isSingleMesh ? selectedObject : selectedObject.parent;
                        // console.log(isSingleMesh);
                    }
                } else {
                    
                }
			} else {
                if ( this.outlinePass ) {
                    this.outlinePass.selectedObjects = [];
                }
                prevObj = null;
                if ( infoDom ) {
                    infoDom.style.display = 'none';
                }
            }
        }
        this.canvas.style.touchAction = 'none';
        this.canvas.addEventListener('pointermove', handleMouseMove.bind(this) );
    }
    setEffectComposer(){
        this.composer = new EffectComposer(this.renderer);
        this.composer.setSize(this.sizes.width, this.sizes.height);
        this.renderPass = new RenderPass(this.canvasScene, this.camera);
        this.composer.addPass(this.renderPass);
        // 矫正通道层的色彩空间
        this.composer.addPass(new ShaderPass(GammaCorrectionShader));
        this.outlinePass = new OutlinePass(new THREE.Vector2(this.sizes.width, this.sizes.height), this.canvasScene, this.camera);
        this.composer.addPass(this.outlinePass);
        this.outlinePass.renderToScreen = true;
        this.outlinePass.edgeStrength = 4 //粗
        this.outlinePass.edgeGlow = 0 //发光
        // this.outlinePass.edgeThickness = 2 //光晕粗
        // this.outlinePass.pulsePeriod = 1 //闪烁
        this.outlinePass.usePatternTexture = false //是否使用贴图
        this.outlinePass.visibleEdgeColor.set('#fff'); // 设置显示的颜色
        this.outlinePass.hiddenEdgeColor.set('#12354a'); // 设置隐藏的颜色
        // 抗锯齿效果
        this.smaaPass = new SMAAPass();
        this.composer.addPass(this.smaaPass);
        // this.composer.addPass(this.smaaPass);
        // this.effectFXAA = new ShaderPass(FXAAShader);
        // this.effectFXAA.uniforms[ 'resolution' ].value.set( 1 / this.sizes.width, 1 / this.sizes.height );
		// this.composer.addPass( this.effectFXAA );
        // this.fxaaPass = new ShaderPass(FXAAShader);
        // const pixelRatio = this.renderer.getPixelRatio();
        // this.fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / ( this.sizes.width * pixelRatio);
        // this.fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / ( this.sizes.height * pixelRatio);
        // this.composer.addPass(this.fxaaPass);
        // this.effectFXAA = SMAAPass;
    }
    resize(){
        this.renderer.setSize(this.sizes.width, this.sizes.height);
        this.composer.setSize(this.sizes.width, this.sizes.height);
        this.renderer.setPixelRatio(this.sizes.pixelRatio);
    }
    update(){
                // this.renderer.render(this.canvasScene, this.camera);

        this.composer.render(this.canvasScene, this.camera);
        // this.renderer.setViewport(0, 0, this.sizes.width, this.sizes.height);
        // this.renderer.render(this.canvasScene, this.camera);
        // 计算偏移角
        // this.renderer.setViewSize(this.canvasScene.setRotationFromAxisAngle(this.rotationZ(this.currentAngle)));
        // this.renderder.updateSizeMatrix(this.handleMotion.bind(this.camera.perspectionCamera));
        // this.renderer.clipSecondScreen(this.canvasScene.screens[this.currentIndex]);s
        
        // 右上角裁剪第二屏，可实时观察正交相机的视图裁剪区
        // this.renderer.setScissorTest(true);
        // this.renderer.setScissor(
        //     this.sizes.width - this.sizes.width/3,
        //     this.sizes.height - this.sizes.height/3,
        //     this.sizes.width/3,
        //     this.sizes.height/3
        // );
        // this.renderer.setViewport(
        //     this.sizes.width - this.sizes.width/3,
        //     this.sizes.height - this.sizes.height/3, 
        //     this.sizes.width/3,
        //     this.sizes.height/3
        // );
        
        // this.renderer.render(this.canvasScene, this.camera.orthographicCamera);
        // this.renderer.setScissorTest(false);
    }
}